<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName"  type="card">
      <el-tab-pane label="售后" name="first" >
        <after ref="after"  v-if="activeName == 'first'" :userList="userList" @showLog="showLog"></after>
      </el-tab-pane>
      <el-tab-pane label="诉求" name="second" >
        <appeal ref="appeal" v-if="activeName == 'second'" :userList="userList"></appeal>
      </el-tab-pane>
    </el-tabs>

    <!--查看日志-->
    <el-dialog
      title="日志"
      :visible.sync="dialogVisible"
      width="500px">
      <div style="max-height:300px;overflow-y: auto; padding-top: 5px;" >
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in logs"
            :key="index">
               <span>
                   <span style="padding-right:10px;">{{activity.createTime}}</span>
                   {{activity.userName}}：{{activity.content}}
               </span>
          </el-timeline-item>
        </el-timeline>
        <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="logs.length == 0">- 暂无数据 -</div>
      </div>

    </el-dialog>
  </div>
</template>
<script>

import appeal from "./components/appeal";
import after from "./components/after";
import {saleUserList} from '@/api/data.js'

import {afterSaleDetail}  from '@/api/company'
import store from '@/store'
import { mapGetters } from 'vuex'

export default {
  name: "afterSales",
  data(){
    return {
      activeName:'first',
      nowDate:'',
      startDate:'',
      endDate:'',
      roles:store.getters.roles ? store.getters.roles : [],
      userList:[],
      dialogVisible:false,
      logs:[]

    }
  },
  components : {
    appeal,after
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId',
      'isMange',
    ]),



  },
  created() {
    this.getUserList()
  },

  filters: {



  },
  methods:{
    showLog(item){
      this.dialogVisible = true
      afterSaleDetail({applyId:item.applyId}).then(res=>{
        this.logs = res.logList;
      });
    },
    getUserList(){
      saleUserList().then((res)=>{
        this.userList = res
      })
    },
  },
}
</script>

